<!-- 查看想定 -->
<script lang="ts" setup>
import type { CustomViewer } from "@/common/utils/CustomCesium/CustomCesium"
import mitter from "@/common/utils/mitter"
import { useCesiumStore } from "@/pinia/stores/cesium"
import { useScenarioStore } from "@/pinia/stores/scenario"
import MeasuringTools from "@@/utils/MeasuringTools/index"
import DrawEntityManager from "@@/utils/ScenarioEdit/DrawEntityManager"
import { isEmpty } from "lodash-es"

import { defineOptions, nextTick, onBeforeUnmount, onMounted, onActivated, reactive, ref, watch } from "vue"
import { useRoute, useRouter } from "vue-router"
import { searchScenarioBasic } from "@/common/apis/scn"
import {
  CesiumMap,
  ControlEditDialog,
  ControlObj,
  EntityEditDialog,
  EntityList,
  SelectedList,
  Toolbar
} from "./components/index"

defineOptions({
  name: "ScnView"
})

const route = useRoute()
const router = useRouter()
const scnId = ref(route.query.id as string)
const scnName = ref<string>()
const EntityEditDialogRef = ref()
const ControlEditDialogRef = ref()
const scenarioStore = useScenarioStore()
const cesiumStore = useCesiumStore()
const state = reactive<{
  customViewer: CustomViewer | null
  editEntityId: string
}>({
  customViewer: null,
  editEntityId: ""
})

const { customViewer, editEntityId } = toRefs(state)

// 初始化DrawEntityManager、MeasuringTools
watch(
  () => [cesiumStore.customViewer, scenarioStore.scnId],
  () => {
    const customViewer = cesiumStore.customViewer
    const scnId = scenarioStore.scnId
    if (customViewer && scnId) {
      if (
        !scenarioStore.drawEntityManager
        && customViewer.mouseHandlerManager
      ) {
        scenarioStore.drawEntityManager = new DrawEntityManager(
          customViewer.viewer,
          customViewer.mouseHandlerManager,
          scnId
        )
      }

      if (
        !scenarioStore.measuringTool
        && customViewer.mouseHandlerManager
      ) {
        scenarioStore.measuringTool = new MeasuringTools(
          customViewer.viewer,
          customViewer.mouseHandlerManager
        )
      }
    }
  }
)

if (isEmpty(route.query.id)) {
  router.replace({ name: "ScnIndex" })
}

onMounted(() => {
  scenarioStore.scnId = route.query.id as string
  getInfo()
  mitter.on("EntityEditDialogShow", (id: string) => {
    nextTick(() => {
      state.editEntityId = id
      EntityEditDialogRef.value.handleShowDialog(id)
    })
  })
  mitter.on("ControlEditDialogShow", (id: string) => {
    nextTick(() => {
      state.editEntityId = id
      ControlEditDialogRef.value.handleShowDialog(id)
    })
  })
})
const getInfo = () => {
  // 根据想定id查询信息
  searchScenarioBasic(scnId.value)
    .then(({ data }) => {
      if (data) {
        scnName.value = data.scnName
      } else {
        ElMessage("数据不存在")
      }
    })
}

onActivated(() => {
  if (scnId.value && scnId.value !== route.query.id) {
    getInfo()
  }
})

onBeforeUnmount(() => {
  mitter.off("ControlEditDialogShow")
  mitter.off("EntityEditDialogShow")
})
</script>

<template>
  <div class="app-container">
    <div class="scenario-edit-main">
      <Toolbar :scn-name="scnName" />
      <div class="content-other">
        <div class="EditScenario-main">
          <CesiumMap v-model:custom-viewer="customViewer" />
        </div>
        <EntityList />
        <ControlObj />
        <SelectedList />
        <EntityEditDialog ref="EntityEditDialogRef" />
        <ControlEditDialog ref="ControlEditDialogRef" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  overflow: hidden;
}

.scenario-edit-main {
  width: calc(100%);
  height: calc(100%);
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  border: 1px solid var(--el-border-color);
  overflow: hidden;
}

.content-other {
  flex: 1;
  min-height: 0;
  position: relative;
}

.EditScenario-main {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}
</style>
